<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>中视场彩色相机</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
  </style>
</head>
<body id="viewer" class="bg-transparent">
<div class="d-flex d-flex flex-row vh-100">

  <div class="flex-grow-1 d-flex flex-column">
    <div id="ctrl" class="d-flex flex-row bg-dark p-1" style="height: 28px;vertical-align: middle">
      <input class="btn btn-r bg-light" type="datetime-local">
      <button title="前一帧" class="btn-r btn btn-dark"><i class="fa fa-angle-left"></i></button>
      <input class="btn btn-r text-light" value="10 / 1233">
      <button title="后一帧" class="btn-r btn btn-dark"><i class="fa fa-angle-right"></i></button>
    </div>
    <div id="img-viewer" class="flex-grow-1 d-flex flex-column" style="border-left: 1px solid #049">
      <div class="img flex-grow-1 position-relative">
        <div id="img1"></div>
      </div>
      <div class="img flex-grow-1 position-relative">
        <div id="img2"></div>
      </div>
    </div>
  </div>
  <div class="ms-1 d-flex flex-column" style="width: 300px">
    <div class="bg-primary text-light" style="height: 28px">
      <label class="btn-r">
        数据 </label>
    </div>
    <div class="flex-grow-1  position-relative">
      <div class="position-absolute h-100 w-100" style="overflow-y: auto">
        <table class="table table-bordered table-dark table-sm">
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js"></script>
<script src="/static/js/echarts.min.js"></script>

<script>
  class Viewer {
    constructor() {
      this.img1 = echarts.init(document.getElementById('img1'), 'dark')
      this.img2 = echarts.init(document.getElementById('img2'), 'dark')
      let opt = {
        backgroundColor: 'transparent', animation: false,
        title: {text: '干涉图'},
        xAxis: {type: 'value'},
        yAxis: {type: 'value'},
        series: {type: 'line', data: [[1, 2], [2, 3], [3, 2], [13, 1]]}
      }
      this.img1.setOption(opt)
      this.img2.setOption(opt)
    }
  }

  main = new Viewer()
</script>
</body>
</html>